<div class="content-section introduction ">
  <div>
    <span class="feature-title">报障管理<span class="gt">&gt;</span>{{title}}  </span>
  </div>
</div>
<div class="content-section implementation GridDemo report">
  <p-panel>
    <p-header>
      <div class="ui-helper-clearfix">
        <button  pButton type="button"  label="返回" (click)="goBack()" [ngStyle]="{'width':'100px'}" ></button>
        <button  pButton type="submit" [ngStyle]="{'float':'right','width':'100px'}" label="保存" (click)="formSave()"  ></button>
        <button  pButton type="submit" [ngStyle]="{'float':'right','width':'100px'}" label="提交" [disabled]="!reportForm.valid" (click)="formSubmit()" ></button>
      </div>
    </p-header>
    <form class="form-horizontal" [formGroup]="reportForm" *ngIf="viewState ==='apply'"  >
    <div class="form-group ui-fluid" >
      <label  class="col-sm-1 control-label ui-no-padding-right-15px"><span></span>单号：</label>
      <div class="col-sm-4">
        <input formControlName="cid" pInputText type="text"  name="cid"   placeholder="单号自动生成"  class="no-border" readonly/>
      </div>
      <label  class="col-sm-3 control-label ui-no-padding-right-15px"><span>*</span>故障所属：</label>
      <div class="col-sm-4">
        <p-autoComplete formControlName="fault_type" name="fault_type" [(ngModel)]="submitReportData.fault_type" [suggestions]="brandoptions" (completeMethod)="searchSuggest($event,'fault_type')" [size]="30"
                        [minLength]="1" placeholder="" [dropdown]="true"  >
          <ng-template let-brand pTemplate="item">
            <div class="ui-helper-clearfix" style="border-bottom:1px solid #D5D5D5">
              <div style="font-size:18px;float:right;margin:10px 10px 0 0">{{brand}}</div>
            </div>
          </ng-template>
        </p-autoComplete>
        <div class="ui-message ui-messages-error ui-corner-all"  *ngIf="!reportForm.controls['fault_type'].valid&&(!reportForm.controls['fault_type'].untouched)" >
          <i class="fa fa-close"></i>
          故障所属必填
        </div>
      </div>
    </div>
    <div class="form-group ui-fluid" >

      <label  class="col-sm-1 control-label ui-no-padding-right-15px"><span>*</span>报障时间：</label>
      <div class="col-sm-4 ">
        <input formControlName="time" pInputText type="text"  name="people" [(ngModel)]="submitReportData.time"    class="no-border" readonly/>
        <div class="ui-message ui-messages-error ui-corner-all"  *ngIf="!reportForm.controls['time'].valid&&(!reportForm.controls['time'].untouched)" >
          <i class="fa fa-close"></i>
          报障时间必填
        </div>
      </div>
      <label  class="col-sm-3 control-label ui-no-padding-right-15px"><span>*</span>报障人：</label>
      <div class="col-sm-2">
        <input formControlName="people" pInputText type="text"  name="people" [(ngModel)]="submitReportData.people"  placeholder="报障人"  class="no-border" readonly/>
        <div class="ui-message ui-messages-error ui-corner-all"  *ngIf="!reportForm.controls['people'].valid&&(!reportForm.controls['people'].untouched)" >
          <i class="fa fa-close"></i>
          报障人必填
        </div>
      </div>
      <div class="col-sm-1">
        <button pButton  type="button" (click)="showPersonMask()" label="选择"></button>
      </div>
      <div class="col-sm-1">
        <button pButton  type="button" (click)="clearpeopleDialog()" label="清空"></button>
      </div>
    </div>

    <div class="form-group ui-fluid" >
      <label  class="col-sm-1 control-label ui-no-padding-right-15px">故障位置：</label>
      <div class="col-sm-9">
        <input pInputText type="text" pInputText  formControlName="location"  placeholder="故障位置" name="location" [(ngModel)]="submitReportData.location" readonly/>
      </div>
      <div class="col-sm-1">
        <button pButton  type="button" (click)="showreportAddLocationMask()" label="选择"></button>
      </div>
      <div class="col-sm-1">
        <button pButton  type="button" (click)="clearLocationDialog()" label="清空"></button>
      </div>
    </div>
    <div class="form-group ui-fluid" >
      <label  class="col-sm-1 control-label ui-no-padding-right-15px"><span>*</span>故障标题：</label>
      <div class="col-sm-11">
        <input formControlName="title" pInputText type="text"  name="title"   placeholder="故障标题"  class="no-border"  [(ngModel)]="submitReportData.title" />
        <div class="ui-message ui-messages-error ui-corner-all"  *ngIf="!reportForm.controls['title'].valid&&(!reportForm.controls['title'].untouched)" >
          <i class="fa fa-close"></i>
          保障标题必填
        </div>
      </div>
    </div>
    <div class="form-group ui-fluid" >
      <label  class="col-sm-1 control-label ui-no-padding-right-15px"><span>*</span>故障描述：</label>
      <div class="col-sm-11">
        <textarea pInputTextarea type="text"  formControlName="content" name="content" [(ngModel)]="submitReportData.content"></textarea>
        <div class="ui-message ui-messages-error ui-corner-all"  *ngIf="!reportForm.controls['content'].valid&&(!reportForm.controls['content'].untouched)" >
          <i class="fa fa-close"></i>
          故障描述必填
        </div>
      </div>
    </div>
    <div class="form-group ui-fluid" >
      <label  class="col-sm-1 control-label ui-no-padding-right-15px">关联设备：</label>
      <div class="col-sm-9">
        <input formControlName="asset" pInputText type="text"  name="people" [(ngModel)]="submitReportData.devices"  placeholder="关联设备"  class="no-border" readonly/>
      </div>
      <div class="col-sm-1">
        <button pButton  type="button" (click)="showreportAddEquementMask()" label="选择"></button>
      </div>
      <div class="col-sm-1">
        <button pButton  type="button" (click)="clearAssetDialog()" label="清空"></button>
      </div>
    </div>
    <div class="form-group ui-fluid" >
      <label  class="col-sm-1 control-label ui-no-padding-right-15px">上传图片：</label>

      <div class="col-sm-11">
        <p-fileUpload  name="file" url="{{uploadPhotoUrl}}" (onUpload)="onBasicUploadAuto($event)" chooseLabel="选择" uploadLabel="上传" cancelLabel="取消" multiple="multiple"></p-fileUpload>
        <ng-template pTemplate="ui-button-text">
          <div>选择文件</div>
        </ng-template>
      </div>
    </div>
    </form>
    <form class="form-horizontal" [formGroup]="reportForm" *ngIf="viewState ==='update'"  >

      <div class="form-group ui-fluid" >
        <label  class="col-sm-1 control-label ui-no-padding-right-15px"><span></span>单号：</label>
        <div class="col-sm-4">
          <input formControlName="cid" pInputText type="text"    placeholder="单号自动生成"  class="no-border" readonly value="{{reportData?.cid}}" />
        </div>
        <label  class="col-sm-3 control-label ui-no-padding-right-15px"><span>*</span>故障所属：</label>
        <div class="col-sm-4">
          <p-autoComplete formControlName="fault_type" name="fault_type" [(ngModel)]="reportData.fault_type" [suggestions]="brandoptions" (completeMethod)="searchSuggest($event,'fault_type')" [size]="30"
                          [minLength]="1" placeholder="" [dropdown]="true"  >
            <ng-template let-brand pTemplate="item">
              <div class="ui-helper-clearfix" style="border-bottom:1px solid #D5D5D5">
                <div style="font-size:18px;float:right;margin:10px 10px 0 0">{{brand}}</div>
              </div>
            </ng-template>
          </p-autoComplete>
          <div class="ui-message ui-messages-error ui-corner-all"  *ngIf="!reportForm.controls['fault_type'].valid&&(!reportForm.controls['fault_type'].untouched)" >
            <i class="fa fa-close"></i>
            故障所属必填
          </div>
        </div>
      </div>
      <div class="form-group ui-fluid" >

        <label  class="col-sm-1 control-label ui-no-padding-right-15px"><span>*</span>报障时间：</label>
        <div class="col-sm-4 ">
          <input formControlName="time" pInputText type="text"  name="people" [(ngModel)]="reportData.time"    class="no-border" readonly/>
          <div class="ui-message ui-messages-error ui-corner-all"  *ngIf="!reportForm.controls['time'].valid&&(!reportForm.controls['time'].untouched)" >
            <i class="fa fa-close"></i>
            报障时间必填
          </div>
        </div>
        <label  class="col-sm-3 control-label ui-no-padding-right-15px"><span>*</span>报障人：</label>
        <div class="col-sm-2">
          <input formControlName="people" pInputText type="text"  name="people" [(ngModel)]="reportData.people"  placeholder="报障人"  class="no-border" readonly/>
          <div class="ui-message ui-messages-error ui-corner-all"  *ngIf="!reportForm.controls['people'].valid&&(!reportForm.controls['people'].untouched)" >
            <i class="fa fa-close"></i>
            报障人必填
          </div>

        </div>
        <div class="col-sm-1">
          <button pButton  type="button" (click)="showPersonMask()" label="选择"></button>
        </div>
        <div class="col-sm-1">
          <button pButton name="people"  type="button" (click)="clearpeopleDialog()" label="清空"></button>
        </div>
      </div>

      <div class="form-group ui-fluid" >
        <label  class="col-sm-1 control-label ui-no-padding-right-15px">故障位置：</label>
        <div class="col-sm-9">
          <input pInputText type="text" pInputText  formControlName="location"  placeholder="故障位置" name="location" [(ngModel)]="reportData.location" readonly/>
        </div>
        <div class="col-sm-1">
          <button pButton  type="button" (click)="showreportAddLocationMask()" label="选择"></button>
        </div>
        <div class="col-sm-1">
          <button pButton  name="location" type="button" (click)="clearLocationDialog()" label="清空"></button>
        </div>
      </div>
      <div class="form-group ui-fluid" >
        <label  class="col-sm-1 control-label ui-no-padding-right-15px"><span>*</span>故障标题：</label>
        <div class="col-sm-11">
          <input formControlName="title" pInputText type="text"  name="title"   placeholder="故障标题"  class="no-border"  [(ngModel)]="reportData.title" />
          <div class="ui-message ui-messages-error ui-corner-all"  *ngIf="!reportForm.controls['title'].valid&&(!reportForm.controls['title'].untouched)" >
            <i class="fa fa-close"></i>
            保障标题必填
          </div>
        </div>
      </div>
      <div class="form-group ui-fluid" >
        <label  class="col-sm-1 control-label ui-no-padding-right-15px"><span>*</span>故障描述：</label>
        <div class="col-sm-11">
          <textarea pInputTextarea type="text"  formControlName="content" name="content" [(ngModel)]="reportData.content"></textarea>
          <div class="ui-message ui-messages-error ui-corner-all"  *ngIf="!reportForm.controls['content'].valid&&(!reportForm.controls['content'].untouched)" >
            <i class="fa fa-close"></i>
            故障描述必填
          </div>
        </div>
      </div>
      <div class="form-group ui-fluid" >
        <label  class="col-sm-1 control-label ui-no-padding-right-15px">关联设备：</label>
        <div class="col-sm-9">
          <input formControlName="asset" pInputText type="text"  name="people" [(ngModel)]="reportData.devices"  placeholder="关联设备"  class="no-border" readonly/>
        </div>
        <div class="col-sm-1">
          <button pButton  type="button" (click)="showreportAddEquementMask()" label="选择"></button>
        </div>
        <div class="col-sm-1">
          <button pButton  type="button" (click)="clearAssetDialog()" label="清空"></button>
        </div>
      </div>
      <div class="form-group ui-fluid" >
        <label  class="col-sm-1 control-label ui-no-padding-right-15px">上传图片：</label>

        <div class="col-sm-11">
          <p-fileUpload  name="file" url="{{uploadPhotoUrl}}" files="{{files}}" (onUpload)="onBasicUploadAuto($event)" chooseLabel="选择" uploadLabel="上传" cancelLabel="取消" multiple="multiple" ></p-fileUpload>
          <ng-template pTemplate="ui-button-text">
            <div>选择文件</div>
          </ng-template>
        </div>
      </div>
      </form>
    </p-panel>
</div>
<app-person-dialog
  *ngIf="displayPersonel"
(dataEmitter)="dataEmitter($event)"
(displayEmitter)="displayEmitter($event)">

</app-person-dialog>
<app-report-add-equipment
  *ngIf="showreportAddEquement"
  (closereportEquement)="closeAddEquementMask($event)"
  (addDev)="addDev($event)"
></app-report-add-equipment>
<app-report-location
  *ngIf="displayLocation"
  (closeLocation)="closeAddLocationMask($event)"
  (addTree)="addConstructionOrg($event)"
></app-report-location>
